<template>
	<view class="">
		<view class="list-left"   v-if="mes.msg.user_info.uid != my_data.id">
			<!-- <image class="userimg" src="../../static/logo.png" mode=""></image> -->
			<image class="userimg" @click="vonterType!=1?goPages_ok(goPages+'?uid='+mes.msg.user_info.uid):''"  :src="(mes.msg.is_niming == 1)? avatar : (staticPhoto+mes.msg.user_info.face)"
			       :lazy-load="true"
			       />
			<view >
				<!-- <view v-if="row.msg.type==2"
				      class="bubble img"
				      @tap="showPic(row.msg)">
				  <image :src="(staticPath + row.msg.content.url)"
				         :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"
				         :lazy-load="true" />
				</view> -->
				<view class="userTieli" >
					<view >
						<text selectable='true' 	user-select="true" >{{conter}}</text>
					</view>
					<view class="imglisy" @tap="showPic(mes.msg)" v-if="type==2 && !mes.msg.content.imgList">
						<image class="im"  :src="(staticPath + mes.msg.content.url)" 
						 :style="{'width': mes.msg.content.w+'px','height': mes.msg.content.h+'px'}"
						 :lazy-load="true"
						 mode=""></image>
					</view>
					<view class="imglisy" v-if="type==2 && mes.msg.content.imgList">
						<image class="im" @tap="showPic(srcList,mes.msg)" v-for="srcList in mes.msg.content.imgList" :src="(staticPathUrl+mes.msg.list_id+'/'+ srcList.url)" 
						 :style="{'width': srcList.w+'px','height': srcList.h+'px'}"
						 :lazy-load="true"
						 mode=""></image>
					</view>
				</view>
				<view class="contentList" v-if="mesTime">
					{{mesTime}}
				</view>
			</view>
		</view>
		<view class="list-right"  v-if="mes.msg.user_info.uid == my_data.id">
			<view >
				<view class="userTieli" >
					<view >
						<text selectable='true' 	user-select="true" >{{conter}}</text>
					</view>
					<view class="imglisy"  @tap="showPic(mes.msg)" v-if="type==2 && !mes.msg.content.imgList">
						<image class="im"  :src="(staticPath + mes.msg.content.url)" 
						 :style="{'width': mes.msg.content.w+'px','height': mes.msg.content.h+'px'}"
						 :lazy-load="true"
						 mode=""></image>
					</view>
					<view class="imglisy" v-if="type==2 && mes.msg.content.imgList">
						<image class="im"  @tap="showPic(srcList,mes.msg)" v-for="srcList in mes.msg.content.imgList" :src="(staticPathUrl+mes.msg.list_id + srcList.url)" 
						 :style="{'width': srcList.w+'px','height': srcList.h+'px'}"
						 :lazy-load="true"
						 mode=""></image>
					</view>
				</view>
				<view class="contentList" v-if="mesTime">
					{{mesTime}}
				</view>
			</view>
			
			<image class="userimg" @click="goPages_ok('/pages/personalData/index')" :src="(staticPhoto+my_data.photo)"
			       :lazy-load="true"
			       style="border-radius: 10px;"
			      />
		</view>
		
	</view>
</template>

<script>
	  import _data from '../../common/_data';
	export default{
		props:{
			conter:{
				type:[String],
				default:()=>''
			},
			mes:{
				type:[Object,JSON],
				default:()=>{}
			},
			vonterType:{
				type:String,
				default:()=>''
			},
			type:{
				type:String,
				default:()=>1
			},
			mesTime:{
				type:String,
				default:()=>''
			},
			list_id:{
				type:String,
				default:()=>''
			},
			my_data:{
				type:[Object,JSON],
				default:()=>{}
			},
			goPages:{
				type:[String],
				default:()=>''
			}
		},
		data(){
			return {
				avatar:require('../../static/132.jpeg'),
			}
		},
		components:{
			
		},
		computed:{
			staticPathUrl(){
				// https://im.numtwin.com/static/chat/E8B5C39F5882F9886FF3B400403AF7D1/20241126/d6cfce14d7376795e159ba1a136029be_thumb.jpg
				return _data.staticChat()
			},
			// staticPath () {
			//   return getApp().globalData.static_url+'/';
			// },
			// static_url
			staticPath () {
			  return _data.staticChat() + this.list_id + '/';
			},
			staticPhoto () {
			  return '';
			  // _data.static_url();
			},
		},
		methods:{
			showPic(e,r){
				let url='';
				let imgList=[];
				
				if(e.url && r){
					url=e.url;
					if(r.content.imgList){
						r.content.imgList.map((item)=>{
							imgList.push(this.staticPathUrl+r.list_id+'/'+item.url)
						})
					}
				}else if(!r && e.content.url){
					url=r.list_id+'/'+e.content.url;
					imgList=[this.staticPathUrl+e.list_id+'/'+e.content.url];
				}
				this.$emit('showPic',{
					url:url,
					imgList:imgList,
				});
			},
			goPages_ok(path){
				uni.navigateTo({
					url:path
				})
			},
		}
	}
</script>

<style scoped>
	.list-right,.list-left{
		display: flex;
		margin-bottom: 32rpx;
	}
	
	.userimg{
		width: 80rpx;
		margin-right: 24rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-right .userimg {
		margin-right: 0;
		margin-left: 24rpx;
	}
	.list-right {
		text-align: right;
		justify-content: flex-end;
	}
	.list-right .contentList{
		text-align: right;
	}
	.imglisy .im{
		width: 168rpx;
		height: 168rpx;
		/* max-width: 380rpx !important; */
		/* max-height: 380rpx !important; */
		margin-right: 8rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.imglisy .im:nth-child(3n){
		margin-right: 0;
	}
	.userTieli{
		/* width: 496rpx; */
		max-width: 568rpx;
		min-height: 80rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #181D24;
		font-style: normal;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		text-transform: none;
		width: auto;
		box-sizing: border-box;
		display: inline-block;
		margin-bottom: 10rpx;
		line-height: 40rpx;
		background: #F2F4F7;
		position: relative;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-left .userTieli::after{
		content: '';
		position: absolute;
		left: -12rpx;
		width: 0;
	  height: 0;
	  top: 30rpx;
	  border-bottom: 12rpx solid transparent;
	  border-top: 12rpx solid transparent;
	  border-right: 14rpx solid #F2F4F7;
	}
	.list-right .userTieli::after{
		content: '';
		position: absolute;
		right: -12rpx;
		width: 0;
	  height: 0;
	  top: 30rpx;
	  border-bottom: 12rpx solid transparent;
	  border-top: 12rpx solid transparent;
	  border-left: 14rpx solid #F2F4F7;
	}
	.contentList{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #9298A0;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>